<template>
	<section>
		<headers txt="我的二维码"></headers>
		<figure>
			<img v-if="qrCode" class="code-m" :src="qrCode" :onerror="errImg">
			<img v-else class="code-m" @click="photos" src="../../assets/Other/qs_code.png">

			<figcaption class="flex_core">
				<img class="head-m" :src="photo" :onerror="errImg" />

				<p>账户：<strong class="fontwt">{{phone}}</strong> </p>
			</figcaption>
		</figure>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				qrCode: "",
				photo: "",
				phone: "",
				errImg: 'this.src= "' + require("../../assets/Other/500.png") + '"'
			}
		},
		created() {
			let v = this;
			let info = JSON.parse(sessionStorage.infos);

			v.qrCode = info.Members_QRCode;
			v.photo = info.Members_HeadPhoto;
			v.phone = info.Members_Phone;
			
		},
		methods: {
			photos: function() {
				let v = this;
				this.$http.get('/WorkMembersIntro/V1.0/CreateQRCode1', {
					params: {
						"MembersID": this.$store.state.MembersID
					}
				}).then((res) => {
					v.qrCode = res.data.Return_Data;
					 
				})
			}
		},
	}
</script>

<style scoped>
	figure {
		margin: 1.3333333333rem 0.6666666666rem 0 0.6666666666rem;
		background: #fff;
		padding: 1.0666666666rem 0;
		text-align: center;
		border-radius: 0.4rem;
	}
	
	.code-m {
		height: 6rem;
		width: 6rem;
	}
	
	.head-m {
		height: 0.8rem;
		width: 0.8rem;
		border-radius: 100%;
		margin-right: 0.4rem;
	}
	
	figcaption {
		margin-top: 0.4rem;
		font-size: 0.4rem;
		color: #666;
	}
</style>